<!--
 * hi-overlay - 遮罩层
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 基础使用 -->
        <module-demo title="基础使用">
            <hi-button text="基础使用" @click="handleClickBtn('', false)" theme="primary"></hi-button>
        </module-demo>

        <!-- 嵌入内容 -->
        <module-demo title="嵌入内容">
            <hi-button @click="handleClickBtn('')" text="嵌入内容 - 默认" theme="success"></hi-button>
            <hi-button @click="handleClickBtn('left-top')" text="嵌入内容 - 左上" theme="warning"></hi-button>
            <hi-button @click="handleClickBtn('left-center')" text="嵌入内容 - 左中" theme="error"></hi-button>
            <hi-button @click="handleClickBtn('left-bottom')" text="嵌入内容 - 左下" theme="info"></hi-button>
            <hi-button @click="handleClickBtn('center-top')" text="嵌入内容 - 中上" theme="primary"></hi-button>
            <hi-button @click="handleClickBtn('center-center')" text="嵌入内容 - 中中" theme="success"></hi-button>
            <hi-button @click="handleClickBtn('center-bottom')" text="嵌入内容 - 中下" theme="warning"></hi-button>
            <hi-button @click="handleClickBtn('right-top')" text="嵌入内容 - 右上" theme="error"></hi-button>
            <hi-button @click="handleClickBtn('right-center')" text="嵌入内容 - 右中" theme="info"></hi-button>
            <hi-button @click="handleClickBtn('right-bottom')" text="嵌入内容 - 右下" theme="primary"></hi-button>
        </module-demo>

        <!-- Overlay -->
        <hi-overlay :show="isShow" :align="align" @close="isShow = false">
            <view class="content" @tap.stop v-if="isShowContent"></view>
        </hi-overlay>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 显示状态
    const isShow = ref(false);
    const isShowContent = ref(true);

    // 内容对齐方式
    const align = ref("");

    /**
     * 嵌入内容
     */
    function handleClickBtn(mode, showContent = true) {
        isShowContent.value = showContent;
        align.value = mode;
        isShow.value = true;
    }
</script>

<style lang="scss" scoped>
    .content {
        width: 100px;
        height: 100px;
        background: #ffffff;
    }
</style>
